<layout name="layout" />
<style type="text/css">
    .menu-preview {

        background-size: contain;
        position: relative;
        width: 317px;
        height: 580px;
        background: transparent url(__PLUGIN_TMPL__/assets/images/bg_mobile_head_default.png) no-repeat 0 0;
        background-position: 0 0;
        border: 1px solid #e7e7eb;
    }
    .menu-preview .title {
        color: #fff;
        text-align: center;
        padding-top: 34px;
        font-size: 15px;
        width: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        margin: 0 30px;
    }
    .menu-preview .menus {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #e7e7eb;
        background: transparent url(__PLUGIN_TMPL__/assets/images/bg_mobile_foot_default.png) no-repeat 0 0;
        background-position: 0 0;
        background-repeat: no-repeat;
        /*padding-left: 43px;*/
        height: 52px;
    }
    .menu-preview .menus ul {
        list-style-type: none;
        display: flex;
        height: 52px;
    }
    .menu-preview .menus .menu-item {
        text-align: center;
        flex: 1;
        height: 52px;
        line-height: 52px;
        border-left: 1px solid #e7e7eb;
        cursor: pointer;
        position: relative;
    }
    .menu-preview .menus .children-menu {
        position: absolute;
        top: -180px;
        display: flex;flex-direction: column;padding-left: 0;
        width: 100%;
    }
    .menu-preview .menus .menu-children-item {
        text-align: center;
        height: 52px;
        line-height: 52px;
        background: #e2e2e2;
        border: 1px solid #e7e7eb;
    }
</style>
<div class="wrap">
    <div class="well">
        <h1>TODO</h1>
        <ol>
            <li>菜单管理</li>
            <li>消息管理(自动回复)</li>
            <li>模板消息</li>
            <li>快捷分享</li>
            <li>粉丝管理</li>
            <li>卡券管理</li>
        </ol>
    </div>
    <div id="wechatMenuEdit">
        <div class="menu-preview">
            <div class="title">武陵山曲</div>
            <div class="menus">
                <ul>
                    <li v-for="(item, key) in menus" :key="key" class="menu-item">
                        <div @click="switchTab(key)">{{ item.label }}</div>
                        <ul class="children-menu" v-if="tabIndex == key">
                           <li class="menu-children-item" v-for="(child, i) in item.children" :key="i">{{ child.label }}</li> 
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
    </div>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#wechatMenuEdit',
        data: {
            tabIndex: 0,
            menus: [
                {
                    label: '惠生活',
                    children: [
                        { label: '德邦快递' },
                        { label: '中通快递' },
                        { label: '天天快递' },
                    ]
                },
                {
                    label: '福利多多',
                    children: [
                        { label: '淘宝客' }
                    ]
                },
                {
                    label: '快递查询',
                    children: [
                        { label: '德邦快递' },
                        { label: '中通快递' },
                        { label: '天天快递' },
                    ]
                }
            ]
        },
        methods: {
            switchTab (index) {
                this.tabIndex = index
            }
        }
    })
</script>